<template>
  <div style="margin-top: 20px;">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form :model="where" class="ele-form-search" label-width="77px" @keyup.enter.native="reload"
               @submit.native.prevent>

        <el-row :gutter="15">
<!--          <el-col :lg="6" :md="12">-->
<!--            <el-form-item label="任务名称:">-->
<!--              <el-input v-model="where.type" clearable placeholder="请输入任务名称"/>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :lg="6" :md="12">
            <el-form-item label="任务编号:">
              <el-input v-model="where.task_number" clearable placeholder="请输入任务编号"/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <div class="ele-form-actions">
              <el-button v-if="permission.includes('sys:task:index')" class="ele-btn-icon" icon="el-icon-search"
                         type="primary" @click="reload">
                查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table ref="table" :columns="columns" :datasource="url" :selection.sync="selection" :where="where"
                     height="calc(100vh - 390px)">
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="addTask" :loading="loading" :disabled="!(projectStatus==='进行中'&&is_charge_person)">新建任务</el-button>
        </template>
        <template slot="task_number" slot-scope="{row}">
          <span style="cursor: pointer;color: var(--color-primary);"
                @click="$router.push('/project/task/info?id=' + row.id)">{{ row.task_number }}</span>
        </template>
        <!--负责人-->
        <template slot="users" slot-scope="{row}">
          <span>{{ row["users"].map(item => item.name).join(',') }}</span>
        </template>
        <!--操作-->
        <template slot="action" slot-scope="{row}" title="任务操作" :destroy-on-close="true">
          <div style="display: flex;justify-content: space-between;align-items: center">
            <el-tooltip content="开始任务" :open-delay="700" placement="top">
              <i class="el-icon-video-play"
                 :class="(row.status_text==='未开始'&&(row.is_task_user||isProjectManager))&&row.project_status_text==='进行中'?'default':'disabled'"
                 @click="startTask(row.id)"></i>
            </el-tooltip>
            <el-tooltip content="关闭任务" :open-delay="700" placement="top">
              <i class="el-icon-switch-button"
                 :class="((row.status_text==='未开始'||row.status_text==='进行中')&&(row.is_project_user||isProjectManager))&&row.project_status_text==='进行中'?'default':'disabled'"
                 @click="closeTask(row.id)"></i>
            </el-tooltip>
            <el-tooltip content="完成任务" :open-delay="700" placement="top">
              <i class="el-icon-finished"
                 :class="(row.status_text==='进行中'&&(row.is_task_user||isProjectManager))&&row.project_status_text==='进行中'?'default':'disabled'"
                 @click="completeTask(row)"></i>
            </el-tooltip>
            <el-tooltip content="编辑任务" :open-delay="700" placement="top">
              <i class="el-icon-edit-outline"
                 :class="((row.status_text==='未开始'||row.status_text==='进行中')&&(row.is_project_user||isProjectManager))&&row.project_status_text==='进行中'?'default':'disabled'"
                 @click="editTask(row)"></i>
            </el-tooltip>
            <el-tooltip content="删除任务" :open-delay="700" placement="top">
              <el-popconfirm
                @confirm="delTask(row.id)"
                title="确认删除该任务？"
                :class="(row.status_text!=='已完成'&&(row.is_project_user||isProjectManager))&&row.project_status_text==='进行中'?'default':'disabled'"
              >
                <div slot="reference">
                  <i class="el-icon-delete"
                     :class="(row.status_text!=='已完成'&&(row.is_project_user||isProjectManager))&&row.project_status_text==='进行中'?'default':'disabled'"></i>
                </div>
              </el-popconfirm>
            </el-tooltip>
          </div>

        </template>
      </ele-pro-table>
    </el-card>
    <StartTask ref="start" @reload="reload"></StartTask>
    <addTask :type-list="taskTypeList" ref="addTask" @reload="reload"></addTask>
    <CompleteTask ref="completeTaskRef" @reload="reload"/>
    <EditTask :type-list="taskTypeList" :status-list="statusList" ref="editTaskRef" @reload="reload"/>
    <CloseTask ref="closeTask" @reload="reload"></CloseTask>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import StartTask from "@/views/project/task/components/startTask.vue";
import addTask from "@/views/project/task/components/addTask.vue";
import CompleteTask from "@/views/project/task/components/completeTask.vue";
// import CustomSelect from "@/views/reports/workorder-monitoring/components/CustomSelect.vue";
import EditTask from "@/views/project/task/components/editTask.vue";
import CloseTask from "@/views/project/task/components/closeTask.vue";


export default {
  props: ['id', 'percent_residue', 'name','project_number','work_hour','is_charge_person'],
  components: {
    StartTask,
    addTask,
    CompleteTask,
    // CustomSelect,
    EditTask,
    CloseTask
  },
  computed: {
    ...mapGetters(["permission"]),
    isProjectManager() {
      let flag
      (JSON.parse(localStorage.getItem('user')).position_name) === '项目经理' ? flag = true : flag = false
      return flag
    }
  },
  data() {
    return {
      current_percent_residue:null,
      where: {},
      url: `/tasks?project_id=${this.id}`, // 表格数据接口
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          prop: 'project_name',
          label: '项目名称',
          width: 200,
          align: 'center',
          showOverflowTooltip: true,
        },
        {
          slot: 'task_number',
          label: '任务编号',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
        },
        {
          prop: 'type',
          label: '任务名称',
          showOverflowTooltip: true,
          minWidth: 150,
          align: 'center'
        },
        {
          prop: 'product_count',
          label: '完成设备数量',
          showOverflowTooltip: true,
          minWidth: 150,
          align: 'center',
        },        {
          prop: 'plan_product_quantity',
          label: '计划设备数量',
          showOverflowTooltip: true,
          minWidth: 150,
          align: 'center',
        },
        {
          prop: 'status_text',
          label: '任务状态',
          align: 'center',
          showOverflowTooltip: true,
          width: 100
        },

        {
          slot: 'users',
          label: '负责人',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center'
        },
        {
          prop: 'plan_work_hour',
          label: '耗费工时（h）',
          showOverflowTooltip: true,
          minWidth: 150,
          align: 'center'
        },
        {
          prop: 'plan_start_at',
          label: '计划开始时间',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center'
        },
        {
          prop: 'plan_complete_at',
          label: '计划结束时间',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center'
        },

        {
          prop: 'schedule_text',
          label: '进度状态',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center',
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 160,
          align: 'center',
          resizable: false,
          slot: 'action',
          fixed: "right"
        }
      ], // 表格列配置
      loading: false, // 表格搜索条件
      selection: [],
      statusList: [],
      taskTypeList: [],
      projectStatus:null,
    };
  },
  mounted() {
    this.queryTaskType()
    this.queryTaskStatus()
    this.updatePercentResidue()
  },
  methods: {
    updatePercentResidue(){
      this.loading = true
      this.$http.get('/projects',{params:{project_number:this.project_number}}).then(res=>{
        if(res.data.code===0){
          this.current_percent_residue=res.data.data[0].percent_residue
          this.projectStatus=res.data.data[0].status_text
        }
        this.loading = false
      })
    },
    addTask() {
      this.$refs.addTask.showDialog({
        id: this.id,
        plan_work_hour:this.work_hour,
        percent_residue: this.current_percent_residue||this.percent_residue,
        name: this.name

      });
      this.$forceUpdate()
    },
    editTask(row) {
      this.$refs.editTaskRef.onActivate(row)
    },
    delTask(id) {
      this.loading = true
      this.$http.delete(`/tasks/${id}`).then(res => {
        this.loading = false
        if (res.data.code === 0) {
          this.loading = false
          this.$message.success(res.data.msg)
        } else {
          this.loading = false
          this.$message.error(res.data.msg);
        }
      })
    },
    completeTask(row) {
      this.$refs.completeTaskRef.onActivate(row)
    },
    closeTask(id) {
      this.$refs.closeTask.active(id)
    },
    startTask(id) {
      this.$refs.start.active(id)
    },

    async queryTaskType() {
      const res = await this.$http.get(`/tasks/types`)
      res.data.success ? this.taskTypeList = res.data.data.map(item => ({
        value: item,
        label: item
      })) : this.$message.error(res.data.msg)
    },
    async queryTaskStatus() {
      const res = await this.$http.get('/tasks/status')
      res.data.success ? this.statusList = res.data.data.map(item => ({
        value: item.code,
        label: item.title
      })) : this.$message.error(res.data.msg)
    },

    /* 刷新表格 */
    reload() {
      this.updatePercentResidue()
      this.$refs.table.reload({where: this.where});
    },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.reload();
    },

  }
}
</script>

<style scoped lang="scss">
.searchWrap {

}

::v-deep .el-card__body {
  padding: 0;
}

.searchBox {
  display: flex;

  span {
    color: #a7b5b5;
    display: block;
    width: 110px;
    height: 36px;
    font-size: 16px;
  }

  .searchItem {
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 13px;
    margin: 0 12px 8px 0;
    max-width: 160px;
    overflow: hidden;
    padding: 4px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    font-size: 14px;
  }
}

.btnActive {
  background-color: #1890ff;
  color: #fff;
}

//查看审核样式
.audit-info {
  margin: 50px 0 0 5px;

  .audit-content {
    padding: 20px;
    padding-left: 50px;
    height: 160px !important;
  }
}

.divider-wrap {
  padding: 10px;
  width: 100%;

  .el-divider ::v-deep span {
    color: #ccc;
  }

}

.btnWrap {
  display: flex;

  .el-button {
    margin-right: 20px;
  }
}

.disabled {
  color: #90939973;
  pointer-events: none;
  cursor: not-allowed;
  font-size: 22px;
}

.default {
  color: var(--color-primary);
  cursor: pointer;
  font-size: 22px;
}
</style>
